<template>
  <div class="loginIndex">
    <div class="container">
        <div class="title">
            <span class="">HELLO,<br>欢迎登录<a href="" @click.prevent="">鱼米托育</a></span>
        </div>
        <div class="form">
            <div class="form_item">
                <input class="inp"  type="text" placeholder="请输入手机号" @input="handleChangePhone()" v-model="phoneNum">
            </div>
            <div class="form_item">
                <input class="inp password_inp"   type="password" placeholder="请输入密码" v-model="password" @input="handleChangePassword()">
            </div>
            <div class="form_item checkbox_item">
                <van-checkbox :value='isAgree' shape="square" icon-size="15px"
                @click="handleAgree()">已阅读并同意<a href="" @click.prevent="">使用条款</a>与<a href="" @click.prevent="">隐私权限政策</a></van-checkbox>
            </div>
        </div>
        <div class="btn">
            <div class="btn_item">
                <van-button type="info" :disabled="!isAgree" @click="handleLogin()">登录</van-button>
            </div>
            <div class="btn_item register_btn ">
                <van-button  plain  type="info" :disabled="!isAgree" @click="redirectRegister()">注册</van-button>
            </div>
        </div>
        <div class="forget" @click="redirectForget()">
            <div class="forget_btn">忘记密码?</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loginIndex',
  data: function () {
    return {
      isAgree: false,
      // 手机号
      phoneNum: '',
      password: ''
    }
  },
  methods: {
    // 同意协议
    handleAgree () {
      this.isAgree = !this.isAgree
    },

    // 手机号输入时校验
    handleChangePhone () {
      this.phoneNum = this.phoneNum.replace(/\D/g, '').slice(0, 11)
    },

    // 密码输入时校验
    handleChangePassword () {
      this.password = this.password.slice(0, 30)
    },
    // 提交登录时校验
    handleLogin () {
      if (!this.isAgree) {
        return
      }
      // 手机号校验
      const phonePattern = /^1[3-9]\d{9}$/
      if (!phonePattern.test(this.phoneNum)) {
        this.notify('warning', '手机号格式错误')
        return
      }

      if (!(this.password === '12345678')) {
        this.notify('warning', '账号或密码错误')
        return
      }
      this.notify('success', '登录成功')
    },

    // 消息通知
    notify (type, msg) {
      this.$notify({ type: type, message: msg })
    },

    // 注册页面跳转
    redirectRegister () {
      this.$router.push('/register')
    },

    // w忘记密码页面跳转
    redirectForget () {
      this.$router.push('/forget')
    }
  }
}
</script>

<style lang="less" scoped>
.loginIndex {
  height: 100vh;
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

// 标题
.title {
    position: relative;
    height: 270px;
    padding: 0 30px;
    overflow: hidden;
}

.title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, #e2f3fd, #f6f7e7);
    mask-image: linear-gradient(to bottom, #000000, transparent);
    z-index: -1;
}

.title span {
    margin-top: 230px;
    position: absolute;
    bottom: 0;
    color: black;
    font-size: 25px;
    font-weight: 500;
    a {
        color: #8fc8e7;
    }
}

// 账号密码
.form {
    width: 100%;
    margin-top: 35px;
    padding:  0 30px;
    .inp {
        width: 100%;
        padding: 15px 30px;
        border-radius: 30px;
        border: none;
        background-color: #edf1f4;
    }
    .inp::placeholder {
        color: #d2d6d9;
    }
    .password_inp {
        margin-top: 10px;
    }
    .checkbox_item {
        margin-left: 8px;
        margin-top: 10px;
    }
    a {
        color: #8fc8e7;
    }
    .van-checkbox {
        font-size: 13px !important;
    }
}

.btn {
    flex: 1;
    padding: 0 30px;
    margin-top: 30px;
    .van-button{
        width: 100% !important;
        border-radius: 30px !important;
        height: 48px;
    }
    .register_btn {
        margin-top: 10px;
    }
}
.forget {
  text-align: center;
}
</style>
